<template>
  <div>
    <mt-index-list>
      <mt-index-section :index="val.str+''" v-for="val of Singer" :key="val.index">
        <mt-cell :title="item.singer_name" v-for="item of val.Singer" :key="item.singer_mid">
          <router-link :to="{
                              name:'Singerxq',
                              params:{
                                singer_mid:item.singer_mid,
                                singer_pic:item.singer_pic
                              }
                        }">
            <img class="images" v-lazy="item.singer_pic">{{item.singer_name}}
           </router-link>
        </mt-cell>
      </mt-index-section>
    </mt-index-list>
    <transition
      mode="out-in"
      enter-active-class="animated bounceInRight"
      leave-active-class="animated bounceOutLeft">
      <router-view>
      </router-view>
    </transition>
  </div>
</template>
<script>
import axios from 'axios'
import { Indicator } from 'mint-ui';
export default {
  name:"Singer",
  data() {
    return {
      Singer:[],

    }
  },
  created() {
    Indicator.open('加载中...');
    axios.get('/apig/cgi-bin/musicu.fcg',{
      params:{
        "-": "getUCGI8782890882356955",
        g_tk: 5381,
        loginUin: 0,
        hostUin: 0,
        format: "json",
        inCharset: "utf8",
        outCharset: "utf-8",
        notice: 0,
        platform:"yqq.json",
        needNewCode: 0,
        data: {
          "comm":{
            "ct":24,
            "cv":0
          },
          "singerList":{
            "module":"Music.SingerListServer",
            "method":"get_singer_list",
            "param":{
              "area":-100,
              "sex":-100,
              "genre":-100,
              "index":-100,
              "sin":0,
              "cur_page":1
            }
          }
        }
      }
    })
    .then(res=>{
      // console.log(res.data.singerList.data.tags.index)
      let SingerIndex=res.data.singerList.data.tags.index
      // this.Singer=res.data.singerList.data.singerlist.splice(0,10)
      // console.log(SingerIndex)
      var lists=[]
      for(let i=0;i<SingerIndex.length;i++){
        axios.get('/apig/cgi-bin/musicu.fcg',{
          params:{
            "-": "getUCGI8782890882356955",
            g_tk: 5381,
            loginUin: 0,
            hostUin: 0,
            format: "json",
            inCharset: "utf8",
            outCharset: "utf-8",
            notice: 0,
            platform:"yqq.json",
            needNewCode: 0,
            data: {
              "comm":{
                "ct":24,
                "cv":0
              },
              "singerList":{
                "module":"Music.SingerListServer",
                "method":"get_singer_list",
                "param":{
                  "area":-100,
                  "sex":-100,
                  "genre":-100,
                  "index":SingerIndex[i].id,
                  "sin":0,
                  "cur_page":1
                }
              }
            }
          }
        })
        .then(res=>{
          // console.log(res.data.singerList.data)
          if(res.data.singerList.data.index==-100){
            lists.push({
              index:res.data.singerList.data.index,
              str:"Hot",
              Singer:res.data.singerList.data.singerlist.splice(0,10)
            })
          }else if(res.data.singerList.data.index==27){
            lists.push({
              index:res.data.singerList.data.index,
              str:"#",
              Singer:res.data.singerList.data.singerlist.splice(0,10)
            })
          }else{
            lists.push({
              index:res.data.singerList.data.index,
              str:String.fromCharCode(res.data.singerList.data.index+64),
              Singer:res.data.singerList.data.singerlist.splice(0,10)
            })
          }
          if(i==SingerIndex.length-1){
            Indicator.close();
            lists.sort((a,b)=>{
              return a.index-b.index
            })
            this.Singer=lists
          }
        })
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
.images
  width 1.4rem
  height 1.4rem
  border-radius 100%
  margin-right .3rem
  margin-left .3rem
</style>

